<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品详情</title>
  <!-- 链入css初始化 -->
  <link rel="stylesheet" href="../../css/base.css">
  <!-- 链入头部和底部通用样式 -->
  <link rel="stylesheet" href="../../css/reset.css">
  <link rel="stylesheet" href="../../css/common.css">
  <link rel="stylesheet" href="../../css/main.css">
  <!-- 链入首页主体样式 -->
  <link rel="stylesheet" href="../../css/index.css">
  <!-- 公共样式 -->
  <link rel="stylesheet" href="../../css/idangerous.swiper.css">
  <link rel="stylesheet" type="text/css" href="../../css/animate.css">
  <link rel="stylesheet" type="text/css" href="../../css/style.css">
  <link rel="stylesheet" type="text/css" href="../../css/production/productionLDetail.css">
  <!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->
</head>
<style>
  .swiper-pagination-switch {
    height: 3px !important;
    border-radius: 0;
    cursor: pointer;
    border: none;
    background: #fffafc;
  }

  .pagination2 {
    bottom: 58px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
</style>
<body>
  <header></header>
  <div class="productList-container">
    <div class="productList-container-img"><img class="show" src="../../img/production/banner_02.png" alt=""><img
        class="hide" src="../../img/mobile/banner2.jpg" alt=""></div>
    <div class="productDetailWarp">
      <div class="productDetail wow fadeInUpBig">
        <div class="top clearfix">
          <div class="pull-left">产品详情</div>
          <a href="list.html">
            <div class="pull-right" onclick="goback()"><img src="../../img/production/back.png" alt=""></div>
          </a>
        </div>
        <div class="bottom clearfix">
          <div class="pull-left lf">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img class="img-responsive" src="../../img/production/banner_05.jpg" alt="">
                </div>
                <div class="swiper-slide">
                  <img class="img-responsive" src="../../img/production/banner_05.jpg" alt="">
                </div>
                <div class="swiper-slide">
                  <img class="img-responsive" src="../../img/production/banner_05.jpg" alt="">
                </div>
              </div>
              <div class="pagination1"></div>
            </div>

          </div>
          <div class="pull-left rt">
            <div class="specification">227g -十三香</div>
            <div class="introduce">本品精选多种植物香辛料，经传统工艺炮制，现代技术精制而成。口味纯正，使用方便，用于烹调荤素菜，腌制酱菜、泡菜，调制荤素馅类、风味小吃及汤、面类食品。</div>
            <div class="lines"></div>
            <div class="clearfix trait">
              <div class="pull-left ">风味特点</div>
              <div class="pull-left ">
                <ul class="clearfix">
                  <li class="pull-left mr">烧炒菜肴 · 味美可口</li>
                  <li class="pull-left mr">做汤下面 · 风味自然 </li>
                  <li class="pull-left mr">调制馅类 · 醇香浓郁</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-content">
        <div class="tjsp-title wow fadeInUpBig">推荐食谱</div>
        <div class="tjsp-line wow fadeInUpBig"><span></span></div>
        <div class="tjsp-img clearfix wow fadeInUpBig showPc">
          <div class="pull-left show active"><img src="../../img/production/food.jpg" alt=""></div>
          <div class="pull-left "><img src="../../img/production/food.jpg" alt=""></div>
          <div class="pull-left show"><img src="../../img/production/food.jpg" alt=""></div>
        </div>
        <div class="swiper-container showMb" id="tjspSwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide tjsp-img">
              <img class="img-responsive" src="../../img/production/food.jpg" alt="">
            </div>
            <div class="swiper-slide tjsp-img">
              <img class="img-responsive" src="../../img/production/food.jpg" alt="">
            </div>
            <div class="swiper-slide tjsp-img">
              <img class="img-responsive" src="../../img/production/food.jpg" alt="">
            </div>
          </div>
          <div class="pagination2"></div>
        </div>
        <div class="tjsp-title wow fadeInUpBig">建议用量</div>
        <div class="tjsp-line wow fadeInUpBig"><span></span></div>
        <div class="jyylBox">
          <div class="jyyl wow fadeInUpBig">
            <div class="content clearfix ">
              <div class="pull-left">小龙虾1</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix ">
              <div class="pull-left">小龙虾1</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix ">
              <div class="pull-left">小龙虾1</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix">
              <div class="pull-left">小龙虾1</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix ">
              <div class="pull-left">小龙虾1</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix ">
              <div class="pull-left">小龙虾1</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix ">
              <div class="pull-left">小龙虾1</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix">
              <div class="pull-left">小龙虾1</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix">
              <div class="pull-left">小龙虾1</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix">
              <div class="pull-left">小龙虾1</div>
              <div class="pull-right">1000g</div>
            </div>
          </div>
          <div class="jyyl wow fadeInUpBig">
            <div class="content clearfix ">
              <div class="pull-left">小龙虾2</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix ">
              <div class="pull-left">小龙虾2</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix ">
              <div class="pull-left">小龙虾2</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix">
              <div class="pull-left">小龙虾2</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix ">
              <div class="pull-left">小龙虾2</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix ">
              <div class="pull-left">小龙虾2</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix ">
              <div class="pull-left">小龙虾2</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix">
              <div class="pull-left">小龙虾2</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix">
              <div class="pull-left">小龙虾2</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix">
              <div class="pull-left">小龙虾2</div>
              <div class="pull-right">1000g</div>
            </div>
          </div>
          <div class="jyyl wow fadeInUpBig">
            <div class="content clearfix ">
              <div class="pull-left">小龙虾3</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix ">
              <div class="pull-left">小龙虾3</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix ">
              <div class="pull-left">小龙虾3</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix">
              <div class="pull-left">小龙虾3</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix ">
              <div class="pull-left">小龙虾3</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix ">
              <div class="pull-left">小龙虾3</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix ">
              <div class="pull-left">小龙虾3</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix">
              <div class="pull-left">小龙虾3</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix">
              <div class="pull-left">小龙虾3</div>
              <div class="pull-right">1000g</div>
            </div>
            <div class="content clearfix">
              <div class="pull-left">小龙虾2</div>
              <div class="pull-right">1000g</div>
            </div>
          </div>
        </div>
        <div class="tjsp-title wow fadeInUpBig">烹饪方法</div>
        <div class="tjsp-line wow fadeInUpBig"><span></span></div>
        <div class="prffBox">
          <div class="prff clearfix wow fadeInUpBig">
            <div class="pull-left one">
              <div class=prff-order><span class='prff-index'>1</span><span class='prff-text'>
                  先将小龙虾过两次水，冲洗-下，然后用牙刷一-个个刷干净，特别是肚子部分</span></div>
            </div>
            <div class="pull-left two">
              <div class=prff-order><span class='prff-index'>1</span><span class='prff-text'>
                  先将小龙虾过两次水，冲洗-下，然后用牙刷一-个个刷干净，特别是肚子部分</span></div>
            </div>
          </div>
          <div class="prff clearfix wow fadeInUpBig">
            <div class="pull-left one">
              <div class=prff-order><span class='prff-index'>2</span><span class='prff-text'>
                  先将小龙虾过两次水，冲洗-下，然后用牙刷一-个个刷干净，特别是肚子部分</span></div>
            </div>
            <div class="pull-left two">
              <div class=prff-order><span class='prff-index'>2</span><span class='prff-text'>
                  先将小龙虾过两次水，冲洗-下，然后用牙刷一-个个刷干净，特别是肚子部分</span></div>
            </div>
          </div>
          <div class="prff clearfix wow fadeInUpBig">
            <div class="pull-left one">
              <div class=prff-order><span class='prff-index'>3</span><span class='prff-text'>
                  先将小龙虾过两次水，冲洗-下，然后用牙刷一-个个刷干净，特别是肚子部分</span></div>
            </div>
            <div class="pull-left two">
              <div class=prff-order><span class='prff-index'>3</span><span class='prff-text'>
                  先将小龙虾过两次水，冲洗-下，然后用牙刷一-个个刷干净，特别是肚子部分</span></div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
  <footer></footer>

  <script src="../../js/jquery-1.11.3.min.js"></script>
  <!-- <script src="../../js/jquery-1.7.2.js"></script> -->
  <script src="../../public/idangerous.swiper.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>
  <script src="../../js/common.js"></script>
  <script type="text/javascript">
    function goBack() {
      window.history.back();
    }
    $(function () {
      $('header').load('../../template/header.html')
      $('footer').load('../../template/footer.html')

      initViewSwiper()
      initTjspSwiper()
      function initViewSwiper() {
        var viewSwiper = new Swiper('.swiper-container', {
          autoplay: 1000,
          visibilityFullFit: true,
          calculateHeight: true, //自动适应图片的高度
          speed: 1500,
          loop: true,
          grabCursor: true,
          pagination: '.pagination1',
          paginationClickable: true
        })
      }
      function initTjspSwiper() {
        var tjspSwiper = new Swiper('#tjspSwiper', {
          autoplay: false,
          visibilityFullFit: true,
          calculateHeight: true, //自动适应图片的高度
          speed: 1500,
          loop: true,
          grabCursor: true,
          pagination: '.pagination2',
          paginationClickable: true,
          onSlideChangeStart: function () {
            updateNavPosition()
          }
        })
        tjspSwiper.swipeTo(0, 1000);
        function updateNavPosition() {
          var index = tjspSwiper.activeIndex - 1
          $('.jyyl').eq(index).show().siblings().hide()
          $('.prff').eq(index).show().siblings().hide()
        }

      }
      $('.tjsp-img .pull-left').click(function () {
        $(this).addClass('active').siblings().removeClass('active')
        var index = $(this).index()
        $('.jyylBox .jyyl').each(function(indexs,item){
          if(indexs == index){
            $(item).addClass('show').removeClass('hide')
          }else{
            $(item).addClass('hide').removeClass('show')
          }
        })
        $('.prffBox .prff').each(function(indexs,item){
          if(indexs == index){
            $(item).addClass('show').removeClass('hide')
          }else{
            $(item).addClass('hide').removeClass('show')
          }
        })
      })
      $('.tjsp-img .pull-left').eq(0).addClass('active').siblings().removeClass('active')
      $('.jyyl').eq(0).show().siblings().hide()
      $('.prff').eq(0).show().siblings().hide()
      // 建议用量
      function renderJyylDom(conut) {
        var length = $('.jyyl .content').length;
        for (var index = 0, len = length; index < len; index++) {
          if ((index + 1) % conut == 0) { // 每一行中最后一个元素去掉右边线
            $('.content').eq(index).addClass('borderR')
          } else if (length - index < conut) {
            console.log(index) // 最后一行的元素去掉下边线
            $('.content').eq(index).addClass('borderB')
          }
        }
      }
      // if (window.screen.width <= 768) {
      //   renderJyylDom(3)
      // } else {
      //   renderJyylDom(4)
      // }
      // 点击加class
      $('.tjsp-img .pull-left').click(function () {
        $(this).addClass('active').siblings().removeClass('active')
      })
      // renderPrffDom()
      if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
        new WOW().init();
      };
    })



  </script>
</body>

</html>